<template>
  <div style="height: 500px; overflow: auto;">
    <div ref="chartColumn" style="width:1200px; height:600px;"></div>
    <!--    <button @click="changeOption">点击改变内容</button>-->
  </div>

</template>

<script>
import { getyxkhfx } from "@/api/industry/shulian";
import * as echarts from 'echarts';
import {getUsercxdj} from "../../api/industry/shulian";
export default {
  data() {
    return {
      types:'全',
      chartColumn: null,
      option:{
        tooltip: {
          trigger: 'axis',

          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '18%',
          left: '10%',  // grid布局设置适当调整避免X轴文字只能部分显示
          right: '10%', // grid布局设置适当调整避免X轴文字只能部分显示
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          show: true,
          axisLabel: {
            formatter: '{value} 位',
            show: false
          },
          splitLine: { show: false },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true, // 倒叙
          axisLabel: {
            color: '#6D7A8E',
            fontSize: 12,
            formatter: (val) => {
              return `${val}`;
            }
          },
          axisLine: {
            show: false // 轴线
          },
          axisTick: {
            show: false // 刻度线
          },
          data: []
        },
        series: [
          {
            name: 'Echarts',
            type: 'bar',
            barWidth: 10,
            showBackground: true,
            barMaxWidth: 20,
            barMinWidth: 5,
            itemStyle: {
              borderRadius: [0, 20, 10, 0],
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(183, 75, 238)' },
                { offset: 1, color: 'rgba(50, 229, 255, 1)' }
              ]),
              borderWidth: 1,
              borderColor: "black"
            },
            data: [],
            label: {
              show: true,
              position: 'right', // 右侧顶部位置
              formatter: '{c}' // 数据显示格式
            }
          }
        ]
      }
    }
  },
  methods: {
    //统计产业物理空间信息
    updateChartWithData() {
      getUsercxdj().then(res => {
        const newData1 = [];
        const newData = [];
        console.log(res,'产品信息liul是是是')
        // for (let i = 0; i < res.data.warehouse.length; i++) {
        //   let modelItem = {};
        //   let modelItem1 = {};
        //   modelItem["value"] = res.data.warehouse[i].buildType;
        //   modelItem1["name"] = res.data.warehouse[i].spaceName;
        //   console.log(modelItem,"无语死了")
        //   this.newData[i]=modelItem;
        //   this.newData1[i]=modelItem1;
        // }
        // let dataArray =  this.newData1.map(item => {
        //   return [item.name];
        // });
        for (let key in res.data) {
          if (Array.isArray(res.data[key])) {
           res.data[key].forEach(item => {
              if (item.pageViews !== 'undefined' && item.spaceName  !== 'undefined') {
                newData.push({ value: `${item.pageViews}`});
                // console.log(this.newData,'杀23了我吧');
                newData1.push({ name:`${item.spaceName}` });
                  // console.log(item.buildType,'杀了我吧');
              }
            });
          }
        }
        let dataArray =  newData1.map(item => {
          return [item.name];
        });
        // console.log( this.option,"无语死了犯困")
        this.option.series[0].data = newData;
        this.option.yAxis.data= dataArray
        this.chartColumn.setOption(this.option);
      });
    },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // Uncomment the following line if you want to show a loading animation during the API request
      // this.chartColumn.showLoading();

      // Fetch API data and update the chart
      this.updateChartWithData();
    }
  },
  initChart() {
    this.chartColumn = echarts.init(this.$refs.chartColumn);
    // Uncomment the following line if you want to show a loading animation during the API request
    // this.chartColumn.showLoading();

    // Fetch API data and update the chart
    this.updateChartWithData();
  },

  mounted() {
    this.initChart();
    this.updateChartWithData()
  }
}
</script>

<style scoped>

</style>
